<template>
    <div class="login">
        <h1>{{title}}</h1>
      <!-- <el-form
        :model="ruleFom"
        :rules="rules"
        ref="login"
      >
        <el-form-item label="用户名" prop="name" >
          <el-input v-model="ruleFom.name" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" >
          <el-input v-model="ruleFom.pwd" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="doLogin()" >登录</el-button>
        </el-form-item>
      </el-form> 

        <el-button @click="emitParent" >
            子->父
        </el-button>
        -->

        <my-form :model="ruleFom" :rules="rules" ref="login" >
            <my-form-item label="用户名" prop="name" >
                <my-input v-model="ruleFom.name" ></my-input>
            </my-form-item>
            <my-form-item label="密码" prop="pwd">
                <my-input type="password" v-model="ruleFom.pwd" ></my-input>
            </my-form-item>
            <my-form-item>
                <el-button @click="doLogin" >
                    登录
                </el-button>
            </my-form-item>
        </my-form>


        {{ruleFom}}

    </div>
</template>

<script>

import MyInput from './MyInput';
import MyFormItem from '@/components/MyFormItem.vue';
import MyForm from '@/components/MyForm.vue';

    export default {
        components: {
            MyInput,
            MyFormItem,
            MyForm,
        },
        props: {
            title: {
                type: String,
                default: '默认 标题'
            }
        },
        data() {
            return {
                ruleFom: {
                    name: '',
                    pwd: '',
                },
                rules: {
                    name: [
                        {
                            min: 6,
                            max: 16,
                            message: '请输入6~16位的用户名'
                        },
                        {
                            required: true,
                            message: '请输入用户名'
                        },
                    ],
                    pwd: [
                        {
                            required: true,
                            message: '请输入密码'
                        },
                    ]
                }
            }
        },
        methods: {
            emitParent() {
                this.$emit('emitParent', { data: 'Hello' })
            },
            doLogin() {
                console.log('doLogin');
                this.$refs.login.validate(result => {
                    console.log(result);
                    if (result) {
                        console.log('校验成功')
                    } else {
                        console.error('校验失败', result)
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="css" scoped>
    .login{
        width: 300px;
        margin: 0 auto;
    }
</style>